<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/goods/confirm_order.css"/>
    <link rel="stylesheet" href="../css/mui.picker.min.css">
    <script type="text/javascript">
        (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            clientWidth = clientWidth || localStorage.getItem("clientWidth")
            if (clientWidth > 750)
                clientWidth = 750;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        })();
    </script>
    <style type="text/css">
        .mui-bar-nav {
            top: 0;
        }

        .mui-content {
            padding-bottom: 100px;
            padding-top: 44px !important;
        }

        html,
        body {
            padding-top: 0;
        }
        .select_add_acitydiv{width: 100%;height: 2rem;}
        .select_add_acity{width: 100%;height: 2rem;position: absolute;left: 0;bottom: 0px;text-align: center;line-height: 2rem;font-size: 18px;background: #F8F8F8;}
    </style>
</head>

<body>

<div id="app">
    <header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #c5c5c5">
        <a class="mui-action-back mui-icon  mui-pull-left arr_left">
        </a>
        <h1 class="mui-title">确认订单</h1>
        <!-- <a class="mui-pull-right" onclick = "buy_car.is_show_del(this)">管理</a> -->
    </header>
    <div class="mui-content">
        <div class="address">

            <div class="send_type">
                <span>选择配送方式：</span>

                <span :class="i==now_send_index?'btn bg_blue':'btn'" v-for="(t,i) in send_types" v-html="t"
                      @click="sel_send_type(i)"></span>

            </div>
            	<div @click="address_list"  style="font-size: 0.6rem;line-height: 2rem;height: 2rem;" v-show="!default_address">请先添加收货地址</div>
            <div class="address_info" @click="open_select_address_box "  v-show="default_address">

                
                <div class="title" :data-id="default_address.uaid">
                    <span class="name">{{default_address.name}} : </span>{{default_address.phone}}
                </div>
                <div class="info">
                    <i></i>
                    <span>{{default_address.province}}{{default_address.city}}{{default_address.area}}{{default_address.address}}</span>
                    <b></b>
                </div>
                
                
                
            </div>
        </div>

        <div class="order_info">
            <div class="title">社区商城</div>
            <div class="goods_list"  v-if="confirmType == 0">
                <div class="goods_item" v-for="goodsItem in  goodsGroup">
                    <div class="img">
                        <img :src="goodsItem.pic" alt="">
                    </div>
                    <div class="info">
                        <div class="goods_title">{{goodsItem.name}}</div>
                        <div class="canshu">
                            <span class="fl">规格：{{goodsItem.rule}}</span>
                            <span class="fr">×{{goodsItem.num}}</span>
                        </div>
                        <span class="price">￥{{goodsItem.price}}</span>
                    </div>
                </div>
            </div>

            <div class="goods_list"  v-if="confirmType == 1">
                <div class="goods_item">
                    <div class="img">
                        <img :src="wareItem.pic" alt="">
                    </div>
                    <div class="info">
                        <div class="goods_title">{{wareItem.name}}</div>
                        <div class="canshu">
                            <span class="fl">规格：{{specification.rule}}</span>
                            <span class="fr">×{{cartInfo.num}}</span>
                        </div>
                        <span class="price">￥{{specification.min_price}}</span>
                    </div>
                </div>
            </div>

            <div class="order_msg">
                <div>
                    <span class="title">可用优惠</span>
                    <span class="right" @click="select_youhui">{{currentCoupon ? currentCoupon.text : '优惠券'}}
                        <i class="mui-icon mui-icon-arrowdown"></i>
                    </span>
                </div>
            </div>

            <div class="order_msg">
                <div>
                    <span class="title">买家留言</span>
                    <input type="text" v-model="remark" placeholder="选填" style="margin-left: 10px;">
                </div>
            </div>
            <div class="order_msg">
                <div class="bottom_info">
                    <span class="title">共2件商品</span>
                    <span class="right">合计:
                        <span class="price">￥{{balance}}</span>
                    </span>
                </div>
            </div>
            <div class="submit_order" @click="formSubmit()">
                <button class="">提交订单</button>
            </div>
			

            <transition name="slide-fade">

                	
                <div class="msg_box" v-if="show_address_box">
                      
                    <div class="top_title">确认收获地址</div>
                    <div class="infos">
                        <div class="ads" @click="to_page('跳转选择地址页')">
                            <span class="name">地址：</span>
                            <span class="text"> 陕西省西安市未央区经开区凤城八路与 文景路十字风景御园19栋</span>
                            <i class="fr mui-icon mui-icon-arrowright" style="color: #212121;"></i>
                        </div>
                        <div class="ads pays" @click="select_pay_type">
                            <span class="pay fl">支付方式：</span>

                            <i class="fr mui-icon mui-icon-arrowright" style="color: #212121;"></i>
                            <span class="pay_type fr">微信支付</span>
                        </div>
                    </div>
                    <div class="submit_order to_pay" @click="to_page('跳转支付页面')">
                        <button class="">立即付款</button>
                    </div>
                </div>

            </transition>
            
            
            
            <transition name="slide-fade">
                    
           <!--选择地址-->
           <div class="select_address" v-show="show_address_select_box" >
           		<div class="select_address_item" @click="select_address(i.uaid,k)" v-for="(i,k) in address_lists">
                    <div class="selected_incon" v-if="k==select_address_index"><img src="../images/car_07.png" alt=""></div>
                    <div class="select_address_item_info">
           			<div>{{i.name}} {{i.phone}} <span :class="i.default==1?'is_default':'' ">默认</span></div>
                       <div>{{i.province}}{{i.city}}{{i.area}} {{i.address}}</div>
                    </div>
           		</div>
           		<div class="select_add_acitydiv"></div>
           		<div class="select_add_acity" @click="address_list">
           			添加地址
           		</div>
           </div>

           
        </transition>
        <div class="back_box" @click="show_address_select_box=false" v-show="show_address_select_box"></div>
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/mui.picker.min.js"></script>
    <script src="../js/tools/util.js"></script>
    <script src="../js/host.config.js"></script>
    <script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
    <script>

        var submit_mask;
        var pay_type_picker;
        var youhui_picker;
        var confirm_order = new Vue({
            el: '#app',
            data: {
                select_address_index:'',//选中的地址下标
            	show_address_select_box:false,
            	address_lists:'',//用户所有地址的列表
            	default_address:'',//用户所有地址的列表
                send_types: ['自提', '货到支付'],
                now_send_index: 1,
                show_address_box: false,
                goodsGroup: [], // 商品数据
                couponGroup: [
                    {
                        price: 5
                    }
                ],
                currentCoupon: null,   //优惠券
                balance: 0,//总价
                confirmType: 0, // 类型
                cartInfo:{},    // 购物车信息
                remark: '', // 备注
                sendType: '货到支付',
                wareItem:{},    // 商品
                user:'',//用户信息
                specification:'',//快速下单时 单个商品的规格价钱等信息
            },
            methods: { 
            	address_list:function(){
            		mui.openWindow({
            			url:'my_newads_confirm_order.html',
            			id:'my_newads_confirm_order.html',
						createNew:true            			
            		})
            	},
            	 open_select_address_box:function(){
            	 	this.show_address_select_box = true;
            	 },
                sel_send_type: function (i) {
                    this.now_send_index = i;
                    this.sendType = this.send_types[i];
                    console.log(this.sendType);
                },
                to_submit: function () {

                    submit_mask.show();
                    this.show_address_box = true;
                },
                to_page: function (page) {
                    mui.toast(page)
                },
                select_pay_type: function () {
                    pay_type_picker.show(function (selectItems) {
                        mui.toast("选择了" + selectItems[0].text);
                    })
                },
                select_youhui: function () {
                    var _this = this;
                    var balance = this.balance;
                    youhui_picker.show(function (selectItems) {
                        if (balance < selectItems[0].full_money) {
                            mui.toast("不符合使用金额");
                            return false;
                        }
                        _this.currentCoupon = selectItems[0];
                        _this.countPrice();
                    })
                },
                go_address_list: function () {
                    mui.openWindow('address_list.html', 'address_list.html')
                },
                select_address:function(address_id,index){
                	console.log(address_id)
                	console.log(index);
                	this.default_address = this.address_lists[index];
                	this.show_address_select_box = false;
                    this.select_address_index = index
                	
                },
                countPrice: function () {   // 价格统计
                    var confirmType = this.confirmType;
                    var goodsGroup = this.goodsGroup;
                    var wareItem = this.wareItem;
                    var cartInfo = this.cartInfo;
                    var count = 0;
                    if(confirmType == 0){
                        goodsGroup.forEach(function (item, index) {
                        	 
                            count += (item.num * (item.min_price*100) )/100;
                        });
                    }else if(confirmType == 1){
                        count = (wareItem.min_price*100) * cartInfo.num;
                        count = count/100;
                    }
                    //this.balance = count;
                    if (this.currentCoupon) {
                        this.balance -= this.currentCoupon.money;
                        if (this.balance <= 0) {
                            //this.balance = 0;
                        }
                    }
                },
                formSubmit: function () {   // 提交订单
                    if(this.confirmType == 0) {   // 购物车下单
                        var cart_data = {
                            cartid: this.cartInfo.cartids,
                            distribution_pay : this.sendType,
                            redbao: this.currentCoupon ? this.currentCoupon.disid : 0,
                            order_remark: this.remark
                        };

                        $.post(url + 'app/order/appinsertOrder', {cart_data:cart_data,uid:this.user.uid,type:1}, function (response) {
                            var responseData = JSON.parse(response);
                            if(responseData.code == '1'){
                                mui.openWindow('order_list.html?status=1', 'order_list.html?status=1');
                            }
                        });

                    } else if(this.confirmType == 1) {  // 快速下单
                    	
                    	
                        var cartInfo = this.cartInfo;
                        var groupBuying = cartInfo.groupBuying;
                        if(groupBuying){    // 拼团订单
                            var goodsid = cartInfo.goodsid;
                            var num = cartInfo.num;
                            var remark =  this.remark;
                            var attrid = cartInfo.attrid;
                            var spell = cartInfo.spell;
                            var spell_id = cartInfo.spell_id;
                            var redbao = this.currentCoupon ? this.currentCoupon.disid : 0;
                            $.post(url + 'app/goods/SpellInsert', {goodsid:goodsid,num:num,remark:remark,attrid:attrid,redbao:redbao,spell:spell,spell_id:spell_id,uid:this.user.uid}, function (response) {
                                var responseData = JSON.parse(response);
                                if(responseData.code == '1'){
                                    mui.openWindow('group_order_list.html?status=1', 'group_order_list.html?status=1');
                                }else{
                                    mui.toast(responseData.msg);
                                }
                            });
                        }else{  // 快速下单
                            var goods_data = {
                                goodsid:cartInfo.goodsid,
                                number:cartInfo.num,
                                remark: this.remark,
                                rule:cartInfo.rule,
                                redbao: this.currentCoupon ? this.currentCoupon.disid : 0,
                            };
                            $.post(url + 'api/order/appinsertOrder', {goods_data:goods_data,uid:this.user.uid}, function (response) {
                                var responseData = JSON.parse(response);
                                if(responseData.code == '1' && responseData.data){
                                    mui.openWindow('order_list.html?status=1', 'order_list.html?status=1');
                                }
                            });
                        }
                    }
                }
            },
            mounted: function () {
                var _this = this;
                var user = host_config.localStorage.user;
                
                if (user) {
                    this.user = JSON.parse(user);
                }
                
                
                //获取地址列表
                console.log(_this.user.uid)
                
                $.ajax({
                	url:host_config.app_server+"address/addressList",
                	type:'get',
                	data:{
                		uid : _this.user.uid, 
                	},
                	success:function(res){
                		
                		res = JSON.parse(res)
                        console.log(JSON.stringify(res),'data') 
                  		_this.address_lists = res.data;
                  		for(var i=0;i<res.data.length;i++){
                  			if(res.data[i].default ==1){
                  				_this.default_address = res.data[i];
                                _this.select_address_index = i;
                  			}
                  		}
                	},
                	error:function(err){
                		console.log(err)
                	}
                })
                
                
                
                var confirmType = util.GetQueryString('confirmType');
                 
           		 
                var cartInfo = JSON.parse(host_config.localStorage.cartInfo);
		 
	 
                this.confirmType = confirmType;
                this.cartInfo = cartInfo;
                console.log(cartInfo);
                if (confirmType == 0) {   // 购物车下单
                	var data = cartInfo.cartids;
                	var datalist = '';
                	for (var i = 0; i < data.length; i++) {
                		datalist = datalist+=data[i]+','
                	}
                	console.log(datalist,'datalist')
                    $.post(url + 'api/cart/cartList', {uid: this.user.uid,cartid:datalist}, function (response) {
                    	
                        var responseData = JSON.parse(response);
                        console.log(responseData,'responseData')
                        if (responseData.code == '1') {
                            var goods = responseData.data;
                            var tempGroup = [];
                            var zongjia = 0;
                            mui.each(goods,function(key,value){
                            	tempGroup.push(value)
                            	zongjia += value.price*value.num
                            	//console.log(value)
                            })
                            confirm_order.balance = zongjia.toFixed(2);
                            console.log(confirm_order.balance)
                            
                            
                            
                            
                            
//                          goods.forEach(function (itemGroup, index) {
//                              itemGroup.goods.forEach(function (item, index) {
//                                  // tempGroup
//                                  cartInfo.cartids.forEach(function (cartidItem, index) {
//                                      if (cartidItem == item.cartid) {
//                                          tempGroup.push(item);
//                                      }
//                                  })
//                              });
//                          });
                            _this.goodsGroup = tempGroup;
                            _this.countPrice();
                        }
                    })
                } else if (confirmType == 1) {  // 快速下单
                	// 只有一个商品  yb
                	
                    // 获取商品信息
                    console.log(this.cartInfo)
                    console.log("------")
                    $.get(url + 'api/goods/detail', {goodsid: cartInfo.goodsid}, function (response) {
                        var responseData = JSON.parse(response);
                        if (responseData.code == '1') {
                        	var goods = responseData.data;
                        	var zongjia = 0;
                        	zongjia = goods.min_price*confirm_order.cartInfo.num
                            confirm_order.balance = zongjia.toFixed(2);
                            
                            var wareItem = responseData.data;
                            
//                          _this.goodsGroup.push(wareItem);
                            
                            
                            _this.wareItem = wareItem;
                         	
                         	 for(var i=0;i<_this.wareItem.specification.length;i++){
                         	 	if(_this.wareItem.specification[i].attrid == _this.cartInfo.attrid){
                         	 		_this.specification = _this.wareItem.specification[i]
                         	 	 
                         	 		 
                         	 		break;
                         	 		
                         	 	}
                         	 	
                         	 	 
                         	 }
                         	 
                         	 console.log(_this.wareItem.specification);
                         		
                         	 
                         	 
                         	
                        }
                        _this.countPrice();
                    });
                }

                // couponApp
                $.get(url + 'api/coupon/couponApp', {bid: 123}, function (response) {
                    var responseData = JSON.parse(response);
                    responseData.forEach(function (item, index) {
                        item.text = item.couponconter;
                    })
                    _this.couponGroup = responseData;
                    youhui_picker = new mui.PopPicker();
                    youhui_picker.setData(responseData);
                });
                
                

                mui.init();
                submit_mask = mui.createMask(function () {
                    that.show_address_box = false;
                });
                //
                //
                // pay_type_picker = new mui.PopPicker();
                // pay_type_picker.setData([{
                //     value: "weipay",
                //     text: "微信支付"
                // }, {
                //     value: "alipay",
                //     text: "支付宝支付"
                // }
                // ])
                //

            }
        })
    </script>
</body>

</html>